<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import TaskItem from '@/components/TaskItem.vue'
import Condition from '@/components/Condition.vue'
import Token from '@/api/token.js'

export default {
  components: {
    HeaderNav,
    TaskItem,
    TaskContainer,
    Condition,
  },
  created() {
     window.$bus.on('close-win-refresh', (index) => {
      layer.close(index);
      this.getTaskList(); //刷新
    });
    this.getTaskList();
    this.stageable();
  },
  data() {
    return {
      taskList: [],
      pagination: {
        page: 1,
        rows: 12,
        total: 0,
      },
      condition: {}, // 查询条件
      conditionList: [],
    }
  },
  methods: {
    stageable() {
      this.$api.stageable().then(ret => {
        let stages = ret.reduce((arr, data) => {
          let stage = {
            id: data.id,
            name: data.name,
            child: {
              name: "任务模块",
              value: 'module',
              list: data.module_set.reduce((array, module) => {
                let m = {
                  id: module.id,
                  name: module.name
                }
                array.push(m)
                return array
              }, [])
            }
          }
          arr.push(stage)
          return arr
        }, [])

        let result = [
          {
            name: "任务阶段",
            value: 'stage',
            list: stages,
          },
          {
            name: "难易程度",
            value: 'level',  // 查询条件对应的键
            list: [
              {id: 1, name: "简单题"},
              {id: 2, name: "中等题"},
              {id: 3, name: "难题"},
              {id: 4, name: "选做题"},
            ],
          }
        ]
        this.conditionList = result
      })
    },
    getTaskList() {
      let queryParams = {
        page: this.pagination.page,
        rows: this.pagination.rows,
      };
      if (this.condition.level !== null && this.condition.level !== undefined) {
        queryParams.level = this.condition.level;
      }
      if (this.condition.stage !== null && this.condition.stage !== undefined) {
        queryParams.stage = this.condition.stage;
      }
      if (this.condition.module !== null && this.condition.module !== undefined) {
        queryParams.module = this.condition.module;
      }
      if (this.condition.search !== null && this.condition.search !== undefined) {
        queryParams.search = this.condition.search;
      }

      ///获取查询到的任务列表
      console.log(queryParams,'///获取查询到的任务列表//////////////////////')

      this.$api.getUserTask(queryParams).then(ret => {
        this.pagination.total = ret.count
        this.taskList = ret.results
        console.log(ret.results)
      })
    }
  },
  watch: {
    condition: {
      handler(val, oldVal) {
        this.getTaskList()
      },
      deep: true, //进行深度监听
    }
  }
}
</script>

<template>
  <main>
    <!-- 系统导航 -->
    <HeaderNav active-index="0"></HeaderNav>

    <!-- 搜索条件 -->
    <Condition :conditionList="conditionList" v-model="condition"></Condition>

    <!-- 任务列表 -->
    <TaskContainer>
      <template #search="{ condition }">
        <el-input
            v-model="condition.search" size="large"
            placeholder="请输入搜索的任务关键词">
          <template #prefix>
            <el-icon class="el-input__icon">
              <search/>
            </el-icon>
          </template>
        </el-input>
      </template>
      <!-- 显示单个任务列表 -->
      <TaskItem v-for="task in taskList" :id="task.task.id" :leave="task.task.level" :stage="task.task.stage.name"
                :title="task.task.title"
                :status="task.task_state" :module-name="task.task.module.name"/>

      <!-- 添加分页插件 -->
      <div style="margin: 20px 0;">
        <el-pagination background layout="prev, pager, next"
                       hide-on-single-page
                       :page-size="pagination.rows"
                       :pager-count="11"
                       v-model:current-page="pagination.page"
                       :total="pagination.total"
        @current-change="getTaskList"/>
      </div>
    </TaskContainer>

  </main>
</template>

